<template>
  <div>
    <el-table
      :header-cell-style="{background:'#eee'}"
      :data="goods_data"
      border
      style="width: 100%;margin-bottom: 20px;"
    >
      <el-table-column type="index" width="50" align="center"></el-table-column>
      <el-table-column align="center" prop="goods_name" label="奖品名称">
        <template slot-scope="scope">
          <el-popover placement="top-start" title trigger="hover">
            <p>{{scope.row.goods_name}}</p>
            <p slot="reference">{{scope.row.goods_name.substring(0,25)}}</p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="奖品图片" width="80px">
        <template slot-scope="scope">
          <el-popover placement="top-start" title trigger="hover">
            <img :src="scope.row.img" alt style="max-width:150px" />
            <el-avatar
              slot="reference"
              shape="square"
              :size="50"
              fit="scale-down"
              :src="scope.row.img"
            ></el-avatar>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" label="中奖名称" width="120px">
        <template slot-scope="scope">
          <el-select v-model="scope.row.rule_id" placeholder="请选择">
            <el-option
              v-for="item in ruleoptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="概率" width="120px">
        <template slot-scope="scope">
          <el-input v-model="scope.row.probability" placeholder="请输入概率最多三位小数"></el-input>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="测试发数" width="120px">
        <template slot-scope="scope">
          <el-select v-model="scope.row.is_con" placeholder="请选择是否测试">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="阶段发数" width="180px">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center">
            <el-input
              :disabled="scope.row.is_con!=1"
              v-model="scope.row.con_start"
              placeholder="开始"
              @change="lowChange(scope.row)"
            ></el-input>-
            <el-input
              :disabled="scope.row.is_con!=1"
              v-model="scope.row.con_end"
              placeholder="结束"
              @change="heightChange(scope.row)"
            ></el-input>
          </div>
        </template>
      </el-table-column>-->
      <!-- <el-table-column align="center" label="价格" prop="price" width="120px"></el-table-column>
      <el-table-column align="center" label="成本" prop="y_price" width="120px"></el-table-column>-->
      <el-table-column align="center" fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-popconfirm
            confirmButtonText="好的"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="这是一段内容确定删除吗？"
            @onConfirm="handleDel(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="排序" width="160">
        <template slot-scope="scope">
          <el-button @click="goFirst(scope.row)" slot="reference" type="text" size="small">
            <i class="el-icon-top" style="font-size:25px"></i>
          </el-button>
          <el-button @click="goUp(scope.row)" slot="reference" type="text" size="small">
            <i class="el-icon-upload2" style="font-size:25px"></i>
          </el-button>
          <el-button @click="goDown(scope.row)" slot="reference" type="text" size="small">
            <i class="el-icon-download" style="font-size:25px"></i>
          </el-button>
          <el-button @click="goLast(scope.row)" slot="reference" type="text" size="small">
            <i class="el-icon-bottom" style="font-size:25px"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'feedbackTable',
  props: {
    goods_data: {
      type: Array,
      default: () => []
    },
    ruleoptions: {
      type: Array,
      default: () => []
    },
    level: {
      type: Number,
      default: () => 1
    }
  },
  data() {
    return {}
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    lowChange(row) {
      if (row.con_end != 0) {
        if (Number(row.con_start) > Number(row.con_end)) {
          row.con_start = '1'
          this.$message.error('开始不能大于结束')
        }
      }
    },
    heightChange(row) {
      if (Number(row.con_start) > Number(row.con_end)) {
        row.con_end = ''
        this.$message.error('结束不能小于开始')
      }
    },
    handleDel(row) {
      this.goods_data.forEach((good, index) => {
        if (good.goods_id == row.goods_id) {
          this.goods_data.splice(index, 1)
        }
      })
      this.$emit('updata', this.goods_data)

      // if (this.level == 1) {
      //   this.$emit('updata1', this.goods_data)
      // }
      // if (this.level == 2) {
      //   this.$emit('updata2', this.goods_data)
      // }
      // if (this.level == 3) {
      //   this.$emit('updata3', this.goods_data)
      // }
    },
    // 图表排序
    goFirst(row) {
      row.sort = this.goods_data[0].sort
      let index = this.goods_data.indexOf(row)
      let item = this.goods_data.splice(index, 1)[0] // 从数组中移除该项并获得它
      this.goods_data.unshift(item) // 将该项插入到数组的开头
      for (let i = 0; i < this.goods_data.length; i++) {
        this.goods_data[i].sort = this.goods_data[0].sort - i
      }
      this.$emit('updata', this.goods_data)

      // this.$emit('updata1', this.goods_data)
    },
    goUp(row) {
      let index = this.goods_data.indexOf(row)

      if (index > 0) {
        this.goods_data.splice(
          index - 1,
          0,
          this.goods_data.splice(index, 1)[0]
        )
      }
      let j = this.goods_data.length - 1
      for (let i = 0; i < this.goods_data.length; i++) {
        this.goods_data[i].sort = j
        j--
      }
      this.$emit('updata', this.goods_data)

      // this.$emit('updata1', this.goods_data)
    },
    goDown(row) {
      let index = this.goods_data.indexOf(row)
      if (index < this.goods_data.length - 1) {
        this.goods_data.splice(
          index + 1,
          0,
          this.goods_data.splice(index, 1)[0]
        )
      }
      let j = this.goods_data.length - 1
      for (let i = 0; i < this.goods_data.length; i++) {
        this.goods_data[i].sort = j
        j--
      }
      // this.$emit('updata1', this.goods_data)
      this.$emit('updata', this.goods_data)
    },
    goLast(row) {
      row.sort = this.goods_data[this.goods_data.length - 1].sort
      let index = this.goods_data.indexOf(row)
      let item = this.goods_data.splice(index, 1)[0] // 从数组中移除该项并获得它
      this.goods_data.push(item) // 将该项插入到数组的末尾
      let j = this.goods_data.length - 1
      for (let i = 0; i < this.goods_data.length; i++) {
        this.goods_data[i].sort = j
        j--
      }
      // this.$emit('updata1', this.goods_data)
      this.$emit('updata', this.goods_data)
    }
  }
}
</script>

<style scoped>
</style>
